import React, { useState, useEffect } from "react";
import { View } from "@tarojs/components";

import "./index.less";

export default (props) => {
  const [key, setKey] = useState("id");
  const [value, setValue] = useState("name");
  useEffect(() => {
    props.keyName && setKey(props.keyName);
    props.value && setValue(props.value);
  }, [props]);
  return (
    <View className="lable">
      {props.list?.length > 0 &&
        props.list.map((item) => {
          return (
            <View className="lable-item">
              <View className="lable-title">{item[value]}</View>
              {props.onDelete && (
                <View
                  className="iconfont icon-shanchu"
                  onClick={() => {
                    props.onDelete(item[key]);
                  }}
                ></View>
              )}
            </View>
          );
        })}
    </View>
  );
};
